.examples {
    height: 100%;
    display: flex;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        'PingFang SC',
        'Hiragino Sans GB',
        'noto sans',
        'Microsoft YaHei',
        'Helvetica Neue',
        Helvetica,
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.header {
    display: flex;
    align-items: center;

    .logo {
        width: 96px;
    }

    .title {
        color: #272e3b;

        span {
            font-size: 36px;
            background-image: linear-gradient(
                121deg,
                #0048ff 18.89%,
                #0c81ed 39.58%,
                #029dce 59.87%,
                #00bbb0 74.37%,
                #00c5a8 79.64%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        sup {
            position: relative;
            top: -4px;
            left: 8px;
            padding: 2px 8px;
            color: #6b7785;
            font-size: 12px;
            font-weight: normal;
            border: 1px solid currentColor;
            border-radius: 12px;
        }
    }
}

.list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;

    .btn {
        --scale: 1;
        --background: #0492ed;
        padding: 10px 24px;
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        background: var(--background);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 9, 61, 0.2);
        transform: scale(var(--scale));
        transition: all 0.3s;

        &:hover {
            --scale: 1.05;
            --background: #00b197;
        }

        .title {
        }
    }
}
